<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>商品收银</title>
	<link rel="stylesheet" href="dist/css/layui.css" />
	<link rel="stylesheet" href="css/iconfont.css" />
	<link rel="stylesheet" href="css/shouy.css" />
</head>

<body>
	<div class="wrap">
		<div class="sy_header clearfix">
			<div class="sy_hleft">
				<div class="sy_logobox">
					<div class="sy_logo"><img src="img/logo-ma.png"></div>
					<p id="app_name"></p>
				</div>
					<ul class="sy_nav clearfix">
						<li>
							<a href="index.html">
								<div class="iconfont icon-shouyintai"></div>
								<p>快速收银</p>
							</a>
						</li>
						<li>
							<a href="sao_pay.html">
								<div class="iconfont icon-saomashouyin"></div>
								<p>扫码收银</p>
							</a>
						</li>
						<li  class="active">
							<a href="product_pay.html">
								<div class="iconfont icon-shangpinshouyin"></div>
								<p>商品收银</p>
							</a>
						</li>
						<li>
							<a href="house.html">
								<div class="iconfont icon-shangpinshouyin"></div>
								<p>房台收银</p>
							</a>
						</li>
						<li>
							<a href="xiaof_member.html">
								<div class="iconfont icon-weibiaoti-"></div>
								<p>我的会员</p>
							</a>
						</li>
						<li>
							<a href="jingybb.html">
								<div class="iconfont icon-jingyingbaobiao"></div>
								<p>经营报表</p>
							</a>
						</li>
					</ul>
				</div>
			<div class="sy_hright">
				<div class="sy_shopbox">
					<div class="sy_simg"><img id="toux" src="" style="background-color: #FFFFFF;"></div>
					<div class="sy_sinfo">
							<p class="sy_snam">店名：<span id="sname"></span></p>
							<p>用户：<span id="user">15973240090</span></p>
							<p class="exit" onclick="exit()">退出登陆</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="sy_pconbox clearfix">
			<div class="sy_proleft">				
				<ul class="sy_pronav">
					<li class="active"><a>全部</a></li>
				</ul>
				<div style="height: 470px;overflow-y: auto;">
				<div class="sy_prolbox">	
					<ul class="sy_prolist clearfix">
					
					</ul>	
					<div id="demo2"></div>
				</div>
				</div>
			</div>
			<div class="sy_proright">
				<div class="sy_probt">
					<span>已选商品(<em id="nums">0</em>)</span>
					<a href="javascript:clear_cart();" style="float: right; padding-right: 15px; color: #009E94; font-size: 14px;">清除</a>
				</div>
				<ul class="sy_proxlist">
				</ul>
				<div class="sy_prorb">
					<div class="sy_prozj">总计：<em>¥</em><em id="totals">0.00</em></div>
					<div class="sy_probtnbox clearfix">
						<button type="button" onclick="sao_pay()" class="sy_probtn orange">收款码</button>
						<button type="button" onclick="jiz_tck()" class="sy_probtn blue">记账</button>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>
<script src="dist/layui.all.js"></script>
<script src="dist/json2.js"></script>
<script type="text/javascript" src="dist/jquery-1.11.0.min.js"></script>
<script src="dist/jquery.lazyload.min.js"></script>
<script src="dist/layui.all.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/common.js"></script>
	<script>
	if(!getValue("agent_id")){
		location.href='login.html';
	}
	layui.use(['laypage', 'layer'], function(){
	  var laypage = layui.laypage
	  ,layer = layui.layer;
	});
	var list={};
	var cart={};
	function set_goods(goods){
		append_html="";
		for(var g in goods){
			var gd = goods[g];
			append_html+='<li data-dk='+gd['dk_price']+' data-zs='+gd['zs_price']+' data-id='+gd['id']+' data-price='+gd['sale_price']+ ' data-name='+gd['goods_name']+'><a>'+
				'<div class="sy_proimg">'+
					'<span><img src="img/moren.jpg" class="lazy" data-original="'+gd['thumb']+'"></span>'+
					'<span class="propri">¥'+gd['sale_price']+'</span>'+
				'</div>'+
				'<div class="sy_pronam">'+gd['goods_name']+'</div>'+
				'</a>'+
			'</li>';
		}
		return append_html;
	}
	function setEvent(){
		$(".sy_pronav li").click(function(){
			$('.sy_pronav .active').removeClass("active");
			$(this).addClass("active");
			if(!$.isEmptyObject(list)){
				var type_id=$(this).attr('data-id');
				var append_html="";
				if(type_id){
					var goods=list[type_id];	
					append_html=set_goods(goods);
				}else{
					if(list){
						for(var r in list){
							var goods = list[r];
							append_html+=set_goods(goods);
						}
					}
				}
				$(".sy_prolist").html(append_html);
				$("img.lazy").lazyload({effect: "fadeIn",event:"mouseover"});
				goods_click();
			}
		})
	}
	function goods_click(){
		$(".sy_prolist li").css("cursor","pointer");
		$(".sy_prolist li").click(function(){
			var goods_id=$(this).data("id");
			var price=parseFloat($(this).data('price'));
			var name=$(this).data('name');
			var good=cart[goods_id];
			var zs_price=$(this).data("zs");
			var dk_price=$(this).data("dk");
			if(good){
				good['num']=good['num']+1;
				good['total_zs']=good['total_zs']+zs_price;
				good['total_dk']=good['total_dk']+dk_price;
				cart[goods_id]=good;
				var gd=$("#gd_"+goods_id);
				var gd_num=parseFloat(gd.val());
				gd.val(gd_num+1);
			}else{
				$("#nums").text(parseFloat($("#nums").text())+1)
				good={};
				good["id"]=goods_id;
				good['price']=price;
				good['name']=name;
				good['num']=1;
				good['total_zs']=zs_price;
				good['total_dk']=dk_price;
				good['zs']=zs_price;
				good['dk']=dk_price;
				cart[goods_id]=good;
				var add_html='<li>'+
						'<div class="pronam">'+name+'</div>'+
						'<div class="projg">'+price+'</div>'+
						'<div class="pronum">'+
						'<span onclick="add_num(this,'+goods_id+')">+</span>'+
						'<input  onchange="change(this,'+goods_id+')"    id="gd_'+goods_id+'" type="text" value=1 />'+
						'<span onclick="ms_num(this,'+goods_id+')">-</span>'+
						'</div>'+
						'</li>';
						$(".sy_proxlist").append(add_html);
			}
			$("#totals").text((parseFloat($("#totals").text())+parseFloat(price)).toFixed(2));
		})
	}
	function add_num(obj,id){
		var num=parseFloat(cart[id]['num']);
		var zs=parseFloat(cart[id]['zs']);
		var dk=parseFloat(cart[id]['dk']);
		cart[id]['num']=num+1;
		cart[id]['total_zs']=cart[id]['total_zs']+zs;
		cart[id]['total_dk']=cart[id]['total_dk']+dk;
		$("#totals").text((parseFloat($("#totals").text())+parseFloat(cart[id]['price'])).toFixed(2));
		$(obj).next("input").val(num+1);
		check_stock($(obj).next("input"),id);
	}
	function ms_num(obj,id){
		var num=parseFloat(cart[id]['num']);
		var zs=parseFloat(cart[id]['zs']);
		var dk=parseFloat(cart[id]['dk']);
		if(num>=1){
			cart[id]['num']=num-1;
			$(obj).prev("input").val(num-1);
			cart[id]['total_zs']=cart[id]['total_zs']-zs;
			cart[id]['total_dk']=cart[id]['total_dk']-dk;
			$("#totals").text((parseFloat($("#totals").text())-parseFloat(cart[id]['price'])).toFixed(2));
		}
	}
	function set_price(){
		if(!$.isEmptyObject(cart)){
			var total_price=0;
			for(var o in cart){
				total_price+=cart[o]['num']*cart[o]['price'];
			}
			$("#totals").text(total_price.toFixed(2));
		}else{
			$("#totals").text(0.00);
		}
	}
	function change(obj,id){
		var v=$(obj).val();
		if(v==""||isNaN(v)){
			$(obj).val(cart[id]['num']);
		}else if($(obj).val()<=0){
			$(obj).val(0);
		}
		cart[id]['num']=$(obj).val();
		set_price();
		check_stock($(obj),id);
	}
	function check_stock(obj,goods_id){
			$.ajax({
				//请求的url
				//注意，如果我们使用路由器的情况下，我们需要设置一下本地服务器的ip地址
				url: APP.api_url + "Sy/check_stock",
				//请求的过程中传递过去的参数 json
				data: {
					goods_id: goods_id,
					nums:$(obj).val(),
					app_id	:APP.app_id,
					time:Date.parse( new Date())
				},
				//成功了的回调，并且带有返回值
				success: function(data) {
					if(data.code!=200){
						layer.msg(data.msg);
					}
				}
			})

	}
	$(function() {
		set_info();
		var index = layer.load(1, {
			shade: [0.1, '#fff'] //0.1透明度的白色背景
		});
			$.ajax({
				url: APP.api_url + "Sy/goods_sk",
				data: {
					agent_id: getValue("agent_id"),
					chain_id:getValue('chain_id'),
					app_id	:APP.app_id,
					time:Date.parse( new Date())
				},
				success: function(data) {
					layer.close(index);
					var type=data.type;
					var type_html="";
					if(type){
						for(var t in type){
							type_html+="<li data-id="+type[t]['id']+"><a>"+type[t].type_name+"</a></li>";
						}
						$(".sy_pronav").append(type_html);
						setEvent();
					}
					var res=data.res;
					if(res){
						list=res;
						var append_html="";
						for(var r in res){
							var goods = res[r];
							append_html+=set_goods(goods);
						}
						$(".sy_prolist").html(append_html);
						$("img.lazy").lazyload({effect: "fadeIn",event:"mouseover"});
						goods_click();
					}
				}
			})

	})
	function sao_pay() {
		if($.isEmptyObject(cart)){
			layer.msg("账单为空!");
			return ;
		}
		var price=parseFloat($("#totals").text());
		$.ajax({
			url: APP.api_url + "Sy/get_goodssk",
			type:'POST',
			data: {
				agent_id: getValue("agent_id"),
				emp_id: getValue("id"),
				price: $("#totals").text(),
				chain_id: getValue("chain_id"),
				goods:cart,
				type:3,
				app_id	:APP.app_id,
				time:Date.parse( new Date())
			},
			success: function(data) {
				var agent = data.agent;
				if(agent.is_score == 1) {
					var price_html="";
					if(agent.score>=data.total_zs){
						var zs=data.total_zs;
						var dk=data.total_dk;
						price_html='<p>零售价:¥<em>'+price+'</em>送<em>'+zs+'</em></p>' +
						'<p>会员价:¥<em>'+price+'</em>抵<em>'+dk+'</em></p>';
					}else{
						price_html="<p>收款:¥<em>"+price+"</em></p>";
					}
				} else {
					price_html = "<p>收款:¥<em>" + price + "</em></p>";
				}
				var html = '<div class="sy_tck">' +
					'<div class="sy_ewmbox">' +
					'<input  type="hidden" id="oid" value="' + data.order_id + '"> ' +
					'<div><input  type="text" name="mem_no" id="mem_no" class="sy_sptsrk" style="width: 75%;border-top-left-radius: 10px;border-bottom-left-radius: 10px;" placeholder="请输入或扫描会员码"></div>' +
					'</br>' +
					'<div><input  type="text" name="mem_card" id="mem_card" class="sy_sptsrk" style="width: 75%;border-top-left-radius: 10px;border-bottom-left-radius: 10px;" placeholder="请输入或扫描会员付款码"></div>' +
					'</br>' +
					'<div class="sy_tctip">' + price_html +
					'</div>' +
					'</div>' +
					'<div class="sy_tcbtnbox">' +
					'<a href="#" class="dayin" onclick="print_order(' + data.order_id + ')">打印</a>' +
					'<a href="#" onclick="wanchen(1)" class="wanc">完成</a>' +
					'</div>' +
					'</div>';
				layer.open({
					title: '收款码',
					shadeClose: true,
					shade: 0.8,
					btn: false,
					area: ['480px', '450px'],
					content: html
				});
				set_keyup(3);
			}
		})
	}

	function jiz_tck() {
		if($.isEmptyObject(cart)){
			layer.msg("账单为空!");
			return ;
		}
		var con = layer.confirm('确认操作?', function(index) {
			$.ajax({
				//请求的url
				//注意，如果我们使用路由器的情况下，我们需要设置一下本地服务器的ip地址
				url: APP.api_url + "Sy/jizhang",
				//请求的过程中传递过去的参数 json
				data: {
					agent_id: getValue("agent_id"),
					emp_id: getValue("id"),
					price: $("#totals").text(),
					oem_id: getValue("oem_id"),
					chain_id: getValue("chain_id"),
					goods:cart,
					type:3,
					app_id	:APP.app_id,
					time:Date.parse( new Date())
				},
				//成功了的回调，并且带有返回值
				success: function(data) {
					layer.close(con);
					var html = '<div class="sy_tck">' +
						'<div class="sy_ewmbox">' +
						'<div class="sy_cgnr">' +
						'<div class="iconfont icon-chenggong"></div>' +
						'</br><p>' + data.msg + '</p>' +
						'</div>' +
						'<div class="sy_tctip">' +
						'<p>¥<em>' + $("#totals").text() + '</em></p>' +
						'</div>' +
						'</div>' +
						'<div class="sy_tcbtnbox">' +
						'<a href="#" class="dayin" onclick="print_order('+data.order_id+')">打印</a>' +
						'<a href="#" onclick="wanchen(3)" class="wanc">完成</a>' +
						'</div>' +
						'</div>';

					layer.open({
						title: '记帐收银',
						shadeClose: true,
						shade: 0.8,
						btn: false,
						area: ['380px', '450px'],
						content: html
					});
				}
			})

		});

	}

</script>